﻿<!DOCTYPE html>
<!--岗位安全考核模板-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }
    </style>
    <style>
        /*说明：
         由于mystyle.css中162行.el-form-item__content {line-height: normal!important;}导致的
         index.css中.el-form-item--mini .el-form-item__content, .el-form-item--mini .el-form-item__label{    line-height: 28px;}失效
         但出于无法修改样式表的情况，所以在该页面添加以下样式，以保证页面内标题和内容不偏离
        */
        .el-form-item--mini .el-form-item__content,
        .el-form-item--mini .el-form-item__label {
            line-height: 28px !important;
        }

        .el-dialog__body {
            height: 200px;
        }
    </style>
    <style>

        .el-input__suffix {
            /* z-index: 9; */
        }

        .cell {
            text-align: center;
        }
    </style>
    <style>
        /*页面内弹窗导致function.js的响应式样式失效，懒得调了，单独写个死样式控制select的样式，勉强能用*/
        .input-with-select .el-input-group__append {
            background-color: #fff;
        }

        .el-input__inner {
            width: 0px;
            padding: 0px;
            margin: 0px;
            border-right: none;
        }

        .el-input--suffix .el-input__inner {
            width: 150px;
            padding-left: 30px;
        }

        .el-input-group__append {
            width: 150px;
        }
        .el-pagination__sizes .el-input__inner {
            width: 100px !important;
        }
    </style>
</head>

<body>
    
    <div id="app" v-cloak>
        <el-form label-position="right" ref="form" :inline="true" :model="formInline" class="demo-form-inline"
                 style="margin-bottom: 15px;">
            <!--按钮-->
            <el-row>
                <el-col class="head-tool">

                    <div class="new_title fl"><strong><img src="/static/images/icon1.png" />岗位安全考核模板设置列表</strong></div>

                    <span>
                        <!--查询-->
                        <!--<btn :text="col.btnSelect" imgsrc="/static/images/search.png" linetype="3"
                             @click="btn_onSubmit"></btn>-->
                        <!--编辑  新增-->
                        <btn :text="col.btnAdd" imgsrc="/static/images/add.png" 
                             @click="btn_edit('xg')"></btn>
                    </span>
                </el-col>
            </el-row>
            <!--按钮下方文字-->
            <el-row>
                <!--<el-col  :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{'选择部门'+mark.m}}
                                </template>
                                <treeselect v-model="departmentId" :options="department" :flat="true"
                                            slot="suffix" placeholder="请选择"
                                            style="line-height: 28px;" />
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>-->
                <el-col  :xs="8" :sm="8" :md="8" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input class="input-with-select" size="mini">
                                <template slot="prepend">
                                    <div> {{'选择岗位'+mark.m}}</div>
                                </template>
                                <el-select @visible-change="visibleChange" v-model="dutyId" slot="append" placeholder="请选择"  @change="postChange">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in duties" :label="item.name" :value="item.id"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <!--下方表格-->
        <el-table ref="table" stripe :data="ListItem.tableData" :row-key="getRowKeys" :height="ListItem.tableHeight"
                  border @selection-change="handleSelectionChange" row-style="height:10px" style="width: 100%;">
            <!--第一列【序号：width:55】-->
            <!--<el-table-column prop="id" :label="PostSafeAssessmentTemplateTable.id" width="55">
    </el-table-column>-->
            <el-table-column type="index" :label="PostSafeAssessmentTemplateTable.id" :index="indexMethod" width="50"
                             show-overflow-tooltip="true"></el-table-column>
            <!--第二列【岗位安全生产责任内容：width:120】-->
            <!--<el-table-column prop="postname" :label="PostSafeAssessmentTemplateTable.postSafeProductionContent">
    </el-table-column>-->
            <el-table-column prop="sysDuty.name"
                             label="岗位" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="sysDepartment.name"
                             label="部门" show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="postSafeProductionContent"
                             :label="PostSafeAssessmentTemplateTable.postSafeProductionContent" show-overflow-tooltip="true">
            </el-table-column>
            <!--第三列【考核内容】-->
            <!--<el-table-column prop="assessmentContent" :label="PostSafeAssessmentTemplateTable.assessmentContent"
                             show-overflow-tooltip="true">
            </el-table-column>-->
            <!--第四列【权重分】-->
            <!--<el-table-column prop="weightScore" :label="PostSafeAssessmentTemplateTable.weightScore"
                             show-overflow-tooltip="true" width="100">
            </el-table-column>-->
            <el-table-column width="53" prop="update" :label="col.btnUpdate" fixed="right">
        <template slot-scope="scope">
            <button type="button" class="elst-bt-xg" @click=UserInput('xg',scope.row.postID)>
                <i class="el-icon-edit"></i>
            </button>
        </template>
    </el-table-column>
        </el-table>
        <!--表格结束-->
        <!--分页-->
        <el-row type="flex" justify="end">
            <el-pagination ref="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="ListItem.currentPage" :page-sizes="ListItem.pagesizes" :page-size="ListItem.pagesize"
                           :layout="ListItem.layout" :total="ListItem.total">
            </el-pagination>
        </el-row>
        <!--分页结束-->
        <!--弹出层-->
        <el-dialog title="岗位安全考核模板管理" fullscreen="true" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%"
                   height="80%" top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
        
        <!--上传界面结束-->
    </div>

    <script>
        //获取分页数据
        function GetPageData1(mythis, currentIndex, url) {
            var currObj = mythis;
            //if (mythis.dutyId == null || mythis.dutyId == "" || mythis.dutyId == undefined) {
            //    currObj.ListItem.tableData = [];
            //    currObj.ListItem.total = 0;
            //    //alert("请选择岗位信息");
            //} else {
                mythis.formInline.model.postID = mythis.dutyId;
                mythis.formInline.offset = (currentIndex - 1) * mythis.ListItem.pagesize;
                mythis.formInline.limit = mythis.ListItem.pagesize;
                myAjax("post", mythis, url, mythis.formInline, function (response) {
                    console.log(response);
                    if (response.data.pageData.length == 0) {
                        currObj.ListItem.tableData = [];
                        currObj.ListItem.total = 0;
                    } else {
                        //currObj.ListItem.tableData = response.data.pageData[0].jG_JobsAssessTemplateDetail
                        //currObj.ListItem.total = response.data.pageData[0].jG_JobsAssessTemplateDetail.length;
                        currObj.ListItem.tableData = response.data.pageData
                        currObj.ListItem.total = response.data.pageData.length;
                    }
                });
            //}
        }
        Vue.component('treeselect', VueTreeselect.Treeselect)
        var app = new Vue({
            el: '#app',
            data: {
                id: [],
                ListItem: ListItem,
                //部门数据集
                department: [],
                //职务数据集
                duties: [],
                //部门model
                departmentId: null,
                //职务model
                dutyId: null,
                //选择部门后的信息对象
                deparmentObject: null,
                formInline: {
                    model: {
                        departmentId: '',
                        dutyId: '',
                        postID:''
                    },
                    offset: 0,
                    limit: 10
                }
            },
            mounted: function () {
                this.GetPageData(1);
                //this.post = getDicData('postname');
                //初始化部门下拉树数据
                //this.getDepartmentData();
                this.getSysDuty();
                tablehigh(this);//计算table高度以及el-tab-pane高度
            },
            //watch: {
            //    //下拉树监控
            //    departmentId(val, oldval) {
            //        //初始化职务选项
            //        this.dutyId = null;
            //        //获取部门信息（含中间表及职务数据）
            //        this.getDuty(val);
            //        //绑定职务下拉框
            //        this.duties = this.deparmentObject.sysDepartmentDuties;
            //    }
            //},
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //表格序号连续化
                indexMethod: function (index) { return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1; },
                //Dialog展示
                UserInput: function (val, id) {
                    mythis = this;
                    //DialogShow(this, val, "PostSafeAssessmentTemplateAdd.html", id);
                    var ddList = mythis.duties;//departmentObj.sysDepartmentDuties;
                    var dutyName = "";
                    for (var i = 0; i < ddList.length; i++) {
                        if (ddList[i].id == mythis.dutyId) {
                            dutyName = v.name;
                            mythis.departmentId = v.sysDepartmentID;
                            break;
                        }
                    }
                    //ddList.forEach(function (v, i) {
                    //    //判断中间表中的职务id与选中的职务id
                    //    if (v.id == mythis.dutyId) {
                    //        //赋值职务名称
                    //        dutyName = v.name;
                    //        mythis.departmentId = v.sysDepartmentID;
                    //        break;
                    //        ////赋值中间表id（即返回的结果键）
                    //        //departmentDutyId = v.id;
                    //    }
                    //});
                    DialogShow(this, val, "PostSafeAssessmentTemplateEdit.html", id, "&postName=" + dutyName + "&departmentId=" + mythis.departmentId);
                },
                //查询方法
                onSubmit: function () { onSubmit(this); },
                //关闭Dialog 回调
                closeDialog: function () {
                    //closeDialog(this);
                    this.ListItem.currentPage = 1;
                    this.GetPageData(1);
                },
               
                //获取分页数据push
                GetPageData: function (currentIndex) { GetPageData1(this, currentIndex, '/api/JG_JobsAssessTemplate/GetList') },
                
                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },
                //查询
                btn_onSubmit: function () {
                    var mythis = this;

                   
                    ////职务名称
                    //var dutyName = '';
                    ////部门职务中间表id
                    //var departmentDutyId = '';
                    ////部门对象（含中间表及职务数据）
                    //var departmentObj = this.deparmentObject;
                    ////判断是否选中部门
                    //if (this.departmentId) {
                    //    //获取部门信息（含中间表及职务数据）促进页面与数据库数据同步
                    //    this.getDuty(this.departmentId);
                    //}
                    ////判断是否选中职务 且 部门对象中的中间表数据是否存在（其实是重复判断）
                    //if (this.dutyId && departmentObj.sysDepartmentDuties.length) {
                    //    //遍历中间表数据
                    //    var ddList = departmentObj.sysDepartmentDuties;

                    //    ddList.forEach(function (v, i) {
                    //        //判断中间表中的职务id与选中的职务id
                    //        if (v.sysDutyID == mythis.dutyId) {
                    //            //赋值职务名称
                    //            dutyName = v.sysDuty.name;
                    //            //赋值中间表id（即返回的结果键）
                    //            departmentDutyId = v.id;
                    //        }
                    //    })
                    //}
                    ////departmentId: this.departmentId,
                    ////departmentName: departmentObj.name,
                    ////dutyId: this.dutyId,
                    ////dutyName: dutyName,
                    ////departDutyId: departmentDutyId,
                    this.formInline.model.postID = this.dutyId;
                    //if (this.formInline.model.postID == "" || this.formInline.model.postID==null) {
                    //    alert("请选择岗位信息")
                    //} else {
                        onSubmit(this);
                    //}
                },
                //编辑按钮
                btn_edit: function (val, id) {
                    var mythis = this;


                    //职务名称
                    var dutyName = '';
                    ////部门职务中间表id
                    //var departmentDutyId = '';
                    ////部门对象（含中间表及职务数据）
                    //var departmentObj = this.deparmentObject;
                    ////判断是否选中部门
                    //if (this.departmentId) {
                    //    //获取部门信息（含中间表及职务数据）促进页面与数据库数据同步
                    //    this.getDuty(this.departmentId);
                    //}
                    ////判断是否选中职务 且 部门对象中的中间表数据是否存在（其实是重复判断）
                    //if (this.dutyId && departmentObj.sysDepartmentDuties.length) {
                    //    //遍历中间表数据
                    var ddList = this.duties;//departmentObj.sysDepartmentDuties;

                        ddList.forEach(function (v, i) {
                            //判断中间表中的职务id与选中的职务id
                            if (v.id == mythis.dutyId) {
                                //赋值职务名称
                                dutyName = v.name;
                                mythis.departmentId = v.sysDepartmentID;
                                ////赋值中间表id（即返回的结果键）
                                //departmentDutyId = v.id;
                            }
                        })
                    //}

                    this.formInline.model.postID = this.dutyId;
                    if (this.formInline.model.postID != "" && this.formInline.model.postID!=null) {
                        id = this.formInline.model.postID;
                        //onSubmit(this);
                        DialogShow(this, val, "PostSafeAssessmentTemplateEdit.html", id, "&postName=" + dutyName + "&departmentId=" + mythis.departmentId);

                    }
                    else {
                        //alert("请选择岗位信息");
                        DialogShow(this, val, "PostSafeAssessmentTemplateEdit.html");
                    }
                },
                //初始化部门下拉树(完成)
                getDepartmentData: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/SysDepartment/GetList', { model: { Name: '', Code: '', CreateFactory: null }, offset: 0, limit: 10 }, function (response) {
                        mythis.department = menuHelper(response.data.pageData, guidEmpty)
                    }, false);
                },
                //联动职务下拉框(完成)
                getDuty: function (pid) {
                    var mythis = this;
                    myAjax("get", mythis, '/api/SysDepartment/Get?id=' + pid, null, function (response) {
                        console.log(' response.data', response.data)
                        mythis.deparmentObject = response.data;

                    }, false);
                },
                getSysDuty: function () {
                    var mythis = this;
                    myAjax("post", this, '/api/SysDuty/GetList', { model: { Name: '', CreateFactory: null }, offset: 0, limit: 10 }, function (response) {
                        mythis.duties = menuHelper(response.data.pageData, guidEmpty)
                    }, false);
                },
                postChange: function (val) {
                    var mythis = this;
                    mythis.dutyId = val;
                    GetPageData1(this, 1, '/api/JG_JobsAssessTemplate/GetList');
                },
            },
        })
        //下拉树数据格式化
        function menuHelper(list, pid) {
            var result = [];
            if (list.length <= 0)
                return list;
            list.forEach(function (v, i) {
                var temp = {};
                for (var key in v) {
                    temp[key] = v[key];
                }
                temp.label = v.name;
                temp.parentId = temp.parentId ? temp.parentId : guidEmpty;
                var obj;
                if (temp.parentId == pid) {
                    obj = temp;
                    var nextObj = menuHelper(list, temp.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
    </script>
</body>

</html>